<script setup lang="ts">
const { money = 50, car = '小三轮' } = defineProps<{
  money?: number;
  car?: string
}>()

/* const emit = defineEmits(['updateCar'])
const handleClick = () => {
  // 第二个参数竟然也能传递 number，没有校验的能力
  emit('updateCar', 111)
} */
// defineEmits 内置的泛型函数
// e => 叫啥都行，表示事件类型，我这定义的是字符串字面量类型
// car => 叫啥都行，表示参数的类型，我这希望是 string
// void => 没有返回值，表示 updateCar 函数返回值类型，一般都是 void
const emit = defineEmits<{
  (e: 'updateCar', car: string): void
  (e: 'updateMoney', money: number,): void
}>()
const handleClick = () => {
  // 第二个参数竟然也能传递 number，没有校验的能力
  emit('updateCar', '特斯拉')
}
const handleMoney = () => {
  emit('updateMoney', 3)
}
</script>
<template>
  <div>
    <p>money: {{money}}</p>
    <p>car: {{car}}</p>
    <button @click="handleClick">update car</button>
    <button @click="handleMoney">update money</button>
  </div>
</template>
